<template>
  <div>
    <!--  <h1>卷内目录</h1> -->
    <div class="container">
      <div class="tops">
        <p>
          <span class="Seat">{{ now_location }}</span
          ><span class="Seat">档案号：{{ File_number }}</span>
        </p>
        <button class="classBack" @click="goBack">返回案卷</button>
      </div>
      <div class="container-right">
        <div class="top">
          <div class="top-right">
            <el-form :model="ruleForm" class="demo-form-inline" ref="ruleForm">
              <el-form-item class="elFrom" label="互见号："> </el-form-item>
              <el-form-item class="elFrom" label="档案密级：">
                <el-input v-model="ruleForm.FileSecurity"></el-input>
              </el-form-item>
              <el-form-item class="elFrom" label="案卷页数：">
                <el-input v-model="ruleForm.page_num"></el-input>
              </el-form-item>
              <el-form-item class="elFroms" label="起止日期:">
                <el-input v-model="ruleForm.start_end_date"></el-input>
              </el-form-item>
              <el-form-item
                label="保管期限："
                class="TextAreas"
                :label-width="formLabelWidth"
              >
                <el-select clearable v-model="ruleForm.store_period">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                class="TextArea"
                label="备注:"
                :label-width="formLabelWidths"
              >
                <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
              </el-form-item>
              <el-form-item
                class="TextAreas"
                label="备考表说明:"
                :label-width="formLabelWidth"
              >
                <el-input
                  type="textarea"
                  v-model="ruleForm.append_remark"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="TextAreas wid"
                label="案卷题名:"
                :label-width="formLabelWidth"
              >
                <el-input type="textarea" v-model="ruleForm.title"></el-input>
              </el-form-item>

              <!--  <div class="top-left">
                <el-button
                  @click="clickOne(1)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >首卷</el-button
                >
                <el-button
                  @click="clickTwo(2)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >上一卷</el-button
                >
                <el-button
                  @click="clickThree(3)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >下一卷</el-button
                >
                <el-button
                  @click="clickFour(4)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >尾卷</el-button
                >
              </div> --></el-form
            >
          </div>
        </div>
        <el-form :inline="true">
          <div class="commontop">
            <div class="commontop-left">
              <el-input
                placeholder="项目名称、ID"
                v-model="froms.keyword"
                @change="INput"
                @clear="INput"
                @keyup.enter.native="goSearch()"
                clearable
                prefix-icon="el-icon-search"
              ></el-input>
              <el-button
                class="searchbgc"
                @click="goSearch"
                icon="iconfont icon-sousuo2"
                >搜索</el-button
              >

              <el-button
                @click="addClick('form')"
                v-show="xsyc === '1' ? true : false"
                icon="iconfont icon-xinzenganjuanmulu"
                >新增卷内目录</el-button
              >
              <!-- <el-button
                v-show="xsyc === '1' ? true : false"
                @click="showjuan"
                icon="iconfont icon-daorujuanneimulu"
                >导入卷内目录</el-button
              > -->
              <el-button
                icon="iconfont icon-daochujuanneimulu"
                v-show="xsyc === '1' ? true : false"
                @click="Goexport"
                >导出卷内目录</el-button
              >
              <el-button
                @click="UPList"
                icon="iconfont icon-piliangdaorupdf"
                v-show="xsyc === '1' ? true : false"
                >批量导入PDF</el-button
              >
              <el-button
                @click="InspectJuan"
                v-show="xsyc === '1' ? true : false"
                >检查数据</el-button
              >
              <el-button @click="ProblemMark">问题标记</el-button>
              <el-button @click="Substitu" v-show="xsyc === '1' ? true : false"
                >文字替换</el-button
              >
              <el-button
                @click="clickOne(1)"
                size="mini"
                v-show="xsyc === '1' ? true : false"
                >首卷</el-button
              >
              <el-button
                @click="clickTwo(2)"
                size="mini"
                v-show="xsyc === '1' ? true : false"
                >上一卷</el-button
              >
              <el-button
                @click="clickThree(3)"
                size="mini"
                v-show="xsyc === '1' ? true : false"
                >下一卷</el-button
              >
              <el-button
                @click="clickFour(4)"
                size="mini"
                v-show="xsyc === '1' ? true : false"
                >尾卷</el-button
              >
            </div>
            <div class="commontop-right">
              <el-button
                v-show="xsyc === '1' ? true : false"
                class="red"
                icon="iconfont icon-shanchu1"
                @click="deleteSelectItem()"
                >删除</el-button
              >
            </div>
          </div>
        </el-form>

        <el-table
          v-loading="isLoading"
          class="table"
          :data="tableData"
          border
          max-height="600"
          @row-click="Rowclick"
          @cell-click="tabClick"
          @selection-change="handleSelectionChange"
          :row-class-name="tableRowClassName"
          :cell-class-name="tableCellClassName"
          :header-cell-style="{
            backgroundColor: '#3963fd',
            color: '#fff',
            'text-align': 'center',
          }"
          style="width: 100%; margin-top: 20px"
        >
          <template slot="empty">
            <img
              src="@/assets/imgs/暂未数据.png"
              alt
              style="margin-top: 104px"
            />
            <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
          </template>
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="serial_no" width="65" label="序号">
            <template slot-scope="scope">
              <a>{{ scope.row.serial_no }} </a>
              <el-tooltip
                :content="scope.row.problem"
                v-show="scope.row.problem != ''"
                placement="top"
              >
                <i
                  class="el-icon-warning icons"
                  @click="Problemsolving(scope.row)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            width="220"
            align="center"
            prop="file_number"
            label="文件编号"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  class="InputTits"
                  ref="editInput"
                  type="textarea"
                  v-model="scope.row.file_number"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                  @input="inputFocus"
                />
              </div>
              <div v-else>{{ scope.row.file_number }}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            align="center"
            prop="director"
            label="责任者"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  ref="editInput"
                  type="textarea"
                  v-model="scope.row.director"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                  @input="inputFocus"
                />
              </div>
              <div v-else>{{ scope.row.director }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="title" label="文件材料题名">
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  type="textarea"
                  class="InputTit"
                  ref="editInput"
                  v-model="scope.row.title"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                  @input="inputFocus"
                />
              </div>
              <div v-else>{{ scope.row.title }}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            align="center"
            prop="c_date"
            label="日期"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  type="textarea"
                  ref="editInput"
                  v-model="scope.row.c_date"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                  @input="inputFocus"
                />
              </div>
              <div v-else>{{ scope.row.c_date }}</div>
            </template>
          </el-table-column>

          <el-table-column
            width="80"
            align="center"
            prop="page_num"
            label="页号"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  ref="editInput"
                  type="textarea"
                  v-model="scope.row.page_num"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                  @input="inputFocus"
                />
              </div>
              <div v-else>{{ scope.row.page_num }}</div>
            </template>
          </el-table-column>

          <el-table-column
            width="60"
            align="center"
            prop="is_pic"
            label="是否图纸"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_pic"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                inactive-color="#ccc"
                @change="switchChange($event, scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            align="center"
            prop="remark"
            label="备注"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  ref="editInput"
                  type="textarea"
                  v-model="scope.row.remark"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                  @input="inputFocus"
                />
              </div>
              <div v-else>{{ scope.row.remark }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120px">
            <!-- v-if="scope.row.value1 == true ? true : false"  -->
            <template slot-scope="scope">
              <el-tooltip
                content="查看"
                v-show="xsyc === '1' ? true : false"
                v-if="scope.row.file_url != ''"
                placement="top"
              >
                <el-button class="green" size="mini"
                  ><a target="__blank" :href="scope.row.file_url"
                    ><i class="iconfont icon-piliangdaorupdf"></i></a
                ></el-button>
              </el-tooltip>

              <el-tooltip
                content="点击上传"
                v-show="xsyc === '1' ? true : false"
                v-else-if="scope.row.file_url == ''"
                placement="top"
              >
                <el-button
                  icon="iconfont icon-piliangdaorupdf"
                  @click="Uppdf(scope.row)"
                  class="red"
                  size="mini"
                ></el-button>
              </el-tooltip>
              <el-button
                size="mini"
                class="red"
                v-show="xsyc === '1' ? true : false"
                @click.native.prevent="deleteRow(scope.row.id)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--   <el-dialog
      :visible.sync="centerDialogVisible"
      width="85%"
      height="700px"
      center
    >
      <div class="Sync">
        <div class="leftSync">
          <el-tree
            :data="datas"
            class="filter-tree"
            :props="defaultProps"
            node-key="id"
            :highlight-current="true"
            @node-click="handleNodeClick2"
          >
            <span class="span-ellipsis" slot-scope="{ node, data }">
              <el-tooltip
                class="item"
                effect="light"
                :content="node.label || ''"
                placement="top-start"
              >
                <span>{{ node.label }}</span>
              </el-tooltip>
            </span>
          </el-tree>
        </div>
        <div class="rightSync">
          <i class="el-icon-arrow-left" @click="GoLeft(1)"></i>
          <iframe
            :src="pageUrl"
            frameborder="0"
            style="width: 100%; height: 600px"
          ></iframe>
          <i class="el-icon-arrow-right" @click="GoLeft(2)"></i>
        </div>
      </div>
    </el-dialog> -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="25%">
      <el-autocomplete
        class="inline-input"
        v-model="problemFrom.problem"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
      ></el-autocomplete>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="problemFromBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="文字替换" :visible.sync="Substitution" width="30%">
      <el-form :model="Substitutionform">
        <el-form-item label="属性" :label-width="formLabelWidth">
          <el-radio v-model="Substitutionform.type" label="1"
            >卷内题名</el-radio
          >
          <!-- <el-radio v-model="Substitutionform.type" label="2"
            >案卷题名</el-radio
          > -->
        </el-form-item>
        <el-form-item label="原文字" :label-width="formLabelWidth">
          <el-input
            v-model="Substitutionform.before_str"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="替换为" :label-width="formLabelWidth">
          <el-input
            v-model="Substitutionform.after_str"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Substitution = false">取 消</el-button>
        <el-button type="primary" @click="SubstitutionBtn">确 定</el-button>
      </span>
    </el-dialog>

    <!--  <el-drawer ref="drawer" title="导入" :visible.sync="drawer" :wrapperClosable="false">
      <common-dawer @close="handleClose" :table="tables" :num="NUmber"></common-dawer>
    </el-drawer> -->
    <common-dawer
      v-if="drawer"
      ref="demoDrawer"
      @closeDrawer="closeDrawer"
      :table="tables"
      :num="NUmber"
    ></common-dawer>
  </div>
</template>

<script>
import commonInfo from "@/utils/common";
import {
  bookCatalogs,
  AddbookCatalogs,
  BtnBookTitles,
  modifybookCatalogs,
  delbookCatalogs,
  bookContents,
  quickSwitchPdf,
  delbookCatalogsMore,
  bookCatalogsproblem,
  bookCatalogsisPic,
  Catalogscheck,
  bCatalogsproblemresolve,
  batchReplaces,
} from "@/api/Template/index";
import CommonDawer from "../../../../../components/common/commonTab.vue";
import fileDownload from "js-file-download";
export default {
  components: {
    CommonDawer,
  },
  data() {
    return {
      /* 树状图数据 */
      datas: [],
      /* 树状图子集和标题 */
      defaultProps: {
        children: "children",
        label: "title",
      },
      /* 树状图修改 */
      filterText: "",

      //按钮显示隐藏
      xsyc: "1",

      //右边表格搜索
      froms: {
        book_title_id: "",
        keyword: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        part_company_id: this.$route.query.companyId,
      },

      clickRow: null, // 当前点击的行
      clickCell: null, // 当前点击的列
      tabClickLabel: "", // 当前点击的列名
      /* 表格数据 */
      tableData: [],
      /* 获取表格数据 */
      pages: {
        book_title_id: "",
        part_company_id: this.$route.query.companyId,
        project_classify_id: sessionStorage.getItem("clickTd"),
      },

      /* 判断是否发生改变 */
      ChangeNot: "0",
      //加载页面
      isLoading: false,
      //新增卷内目录表单数据
      form: {
        project_classify_id: "",
        id: "",
        book_title_id: "",
        title: "",
        file_number: "",
        part_company_id: this.$route.query.companyId,
        serial_num: "",
        director: "",
        c_date: "",
        page_num: "",
        remark: "",
      },
      /* 表单宽度 */
      formLabelWidth: "90px",
      formLabelWidths: "50px",
      //卷内导出传递的值
      iDS: {
        project_classify_id: sessionStorage.getItem("clickTd"),
        book_title_ids: "",
        part_company_id: this.$route.query.companyId,
      },
      //卷内导入传递的值
      iDs: {
        part_company_id: this.$route.query.companyId,
      },
      //区分导入
      NUmber: "",
      //单个PDF上传
      pdfOne: {
        book_catalog_id: "",
        file_url: "",
        part_company_id: this.$route.query.companyId,
      },
      //批量PDF上传
      pdfList: {
        book_title_id: "",
        file_urls: [],
        part_company_id: this.$route.query.companyId,
        project_classify_id: sessionStorage.getItem("clickTd"),
        serial_nos: [],
      },
      //总体导入值的名字
      tables: {},

      /* 问题标记的蒙尘 */
      dialogVisible: false,
      /* 输入建议框的建议数组 */
      restaurants: [],
      /* 提交错误的输入框的绑定值 */
      problemFrom: {
        ids: "",
        problem: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        part_company_id: this.$route.query.companyId,
      },

      /* 显示当前位置 */
      now_location: "",

      /* 档案号 */
      File_number: "",
      /* 状态开关 */
      switchFrom: {
        id: "",
        is_pic: "",
        part_company_id: this.$route.query.companyId,
        project_classify_id: sessionStorage.getItem("clickTd"),
      },
      /* 头部的表单 */
      ruleForm: {},
      /* 使用期限选择 */
      options: [
        { id: 1, title: "永久" },
        { id: 2, title: "10年" },
        { id: 3, title: "3年" },
      ],
      //显示PDF蒙尘
      /*     centerDialogVisible: false, */
      pageUrl: "", // pdf地址
      //表格编辑
      editForm: {
        id: "",
        book_title_id: "",
        part_company_id: this.$route.query.companyId,
        title: "",
        sort: 0,
        file_number: "",
        serial_num: "",
        director: "",
        c_date: "",
        page_num: "",
        remark: "",
      },
      /* 文字替换 */
      Substitutionform: {
        book_title_id: "", //项目分类id
        book_catalog_ids: [], //案卷数组
        project_classify_id: sessionStorage.getItem("clickTd"),
        part_company_id: this.$route.query.companyId,
        select_all: 1, //是否全选
        type: "", //1档案号，2案卷题名
        before_str: "", //需替换的
        after_str: "", //替换为
      },
      /* 文字替换蒙尘 */
      Substitution: false,
      /*  查看pdf判断上一个或者下一个提供的数据*/
      /*  Pdflist: {
        type: "",
        book_catalog_id: "",
        part_company_id: this.$route.query.companyId,
      }, */
      /* 检查卷内目录的值 */
      inspectJuan: {
        book_title_id: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        part_company_id: this.$route.query.companyId,
      },
      /* 是否显示导入文件 */
      drawer: false,
    };
  },
  watch: {
    /* 树状图监听搜索 */
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    /* 批量导入关闭或显示 */
    closeDrawer(value) {
      this.drawer = value;
      if (!this.drawer) {
        this.loadData3();
        console.log(1);
      }
    },
    /* 导出卷内目录按钮 */
    Goexport() {
      this.iDS.book_title_ids = this.ruleForm.id;
      this.$axios({
        method: "post",
        url: "/api/book_catalogs/export",
        headers: {
          Token: localStorage.getItem("token"),
        },
        processData: false,
        contentType: false,
        data: this.iDS,
        responseType: "blob",
      }).then((res) => {
        console.log(res);
        fileDownload(res.data, "卷内目录.xlsx");
      });
    },

    /* 获取头部展示栏数据 */
    async loadData2() {
      let id = this.$route.query.id;
      let type = 1;
      let part_company_id = this.$route.query.companyId;
      let project_classify_id = sessionStorage.getItem("clickTd");

      console.log(id);
      let res = await BtnBookTitles({
        id,
        part_company_id,
        project_classify_id,
      });
      console.log(res, "111");
      this.ruleForm = res.data.data;
      this.now_location = res.data.data.now_location;
      this.File_number = res.data.data.archives_no;
      /* this.tables.book_title_id = this.$route.query.id; */
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
    },
    /* 获取表格数据 */
    async loadData3() {
      let num = this.pages;
      let res2 = await bookCatalogs(num);
      console.log(res2);
      this.tableData = res2.data.data;
      /*  this.total = res2.data.total;
      this.per_page = res2.data.data.per_page;
      this.current_page = res2.data.data.current_page; */
      console.log(res2);
      console.log(this.tableData, "121");
    },
    /* 树状图搜索 */
    INput() {
      if (this.froms.keyword == "") {
        this.loadData2();
      }
    },
    /* 树状图点击触发 */
    /*   handleNodeClick2(data) {
      console.log(data);
      this.pageUrl = data.file_url;
      this.Pdflist.book_catalog_id = data.book_catalog_id;
    }, */
    //搜索表格
    async goSearch() {
      this.froms.page = 1;
      this.froms.per_page = 10;
      this.current_page = 1;
      this.$loading();
      console.log(this.froms);
      if (this.froms.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      this.froms.book_title_id = this.$route.query.id;
      let res = await bookCatalogs(this.froms);
      console.log(res);
      this.tableData = res.data.data.data;
      this.$loading().close();
    },
    /* 跳转到第一卷 */
    async clickOne(item) {
      // 显示loading
      this.$loading();
      let id = this.ruleForm.id;
      console.log(id);
      let type = item;
      let part_company_id = this.$route.query.companyId;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles({
        id,
        type,
        part_company_id,
        project_classify_id,
      });
      console.log(res, "121");
      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
      this.$loading().close();
    },
    /* 跳转到上一卷 */
    async clickTwo(item) {
      // 显示loading
      this.$loading();
      let id = this.ruleForm.id;
      console.log(id);
      let type = item;
      let part_company_id = this.$route.query.companyId;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles({
        id,
        type,
        part_company_id,
        project_classify_id,
      });
      console.log(res, "131");
      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
      this.$loading().close();
    },
    /* 跳转到下一卷 */
    async clickThree(item) {
      // 显示loading
      this.$loading();
      let id = this.ruleForm.id;
      console.log(id);
      let type = item;
      let part_company_id = this.$route.query.companyId;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles({
        id,
        type,
        part_company_id,
        project_classify_id,
      });
      console.log(res, "141");
      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
      this.$loading().close();
    },
    /* 跳转到最后一卷 */
    async clickFour(item) {
      // 显示loading
      this.$loading();
      let id = this.ruleForm.id;
      console.log(id);
      let type = item;
      let part_company_id = this.$route.query.companyId;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles({
        id,
        type,
        part_company_id,
        project_classify_id,
      });
      console.log(res, "151");
      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
      this.$loading().close();
    },
    /* 新增卷内目录 */
    async addClick(formName) {
      if (
        this.multipleSelection == undefined ||
        this.multipleSelection.length == 1
      ) {
        if (this.multipleSelection == undefined) {
          this.form.id = "";
        } else if (this.multipleSelection.length == 1) {
          this.form.id = this.multipleSelection[0].id;
        }
        this.form.project_classify_id = sessionStorage.getItem("clickTd");
        this.form.book_title_id = this.ruleForm.id;

        if (this.tableData == undefined) {
          this.form.serial_num = 1;
        } else {
          this.form.serial_num = this.tableData.length + 1;
        }
        this.form.title = "这是文件材料题名请修改";
        console.log(this.form);
        let res = await AddbookCatalogs(this.form);
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "success",
          });
          this.pages.book_title_id = this.ruleForm.id;
          this.loadData3();
        } else {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "error",
          });
        }
      } else if (this.multipleSelection.length > 1) {
        this.$message({
          showClose: true,
          duration: 3000,

          message: "只能选择一个",
          type: "error",
        });
      }
    },
    /* 返回案卷目录 */
    goBack() {
      this.$router.push({
        path: "/project/template-item/filing/ConstructionTwentyNine",
        query: {
          template_id: this.$route.query.template_id,
          companyId: this.$route.query.companyId,
          project_id: this.$route.query.project_id,
        },
      });
    },
    //多选
    /*  handleSelectionChange(val) {
      this.multipleSelection = val;
      //console.log(this.multipleSelection);
    }, */
    //表格删除
    async deleteRow(id) {
      let project_classify_id = sessionStorage.getItem("clickTd");
      this.$confirm("请谨慎操作，删除后不可恢复！！！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await delbookCatalogs({ id, project_classify_id });
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData2();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((_) => {
          this.$message({
            showClose: true,
            duration: 3000,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    //单个PDF上传
    Uppdf(row) {
      this.pdfOne.book_catalog_id = row.id;
      this.tables = this.pdfOne;
      this.drawer = true;
      this.NUmber = "pdfone";
      this.$nextTick(() => {
        this.$refs.demoDrawer.open2();
      });
    },
    /* 批量导入PDF */
    UPList() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,

          message: "请先选中要导入的数据哦！ 亲",
          type: "error",
        });
      } else {
        console.log(this.pdfList, "112");
        this.pdfList.book_title_id = this.ruleForm.id;
        this.pdfList.serial_nos = this.multipleSelection.map(
          (item) => item.serial_no
        );

        this.tables = this.pdfList;
        this.drawer = true;
        this.NUmber = "pdflist";
        this.$nextTick(() => {
          this.$refs.demoDrawer.open2();
        });
      }
    },
    /* 问题已解决 */
    Problemsolving(row) {
      this.$confirm("问题已解决？")
        .then(async (_) => {
          let id = row.id;
          let part_company_id = this.$route.query.companyId;
          let project_classify_id = sessionStorage.getItem("clickTd");
          let res = await bCatalogsproblemresolve({
            id,
            part_company_id,
            project_classify_id,
          });
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData2(this.iDS);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((_) => {
          console.log(2);
        });
    },
    Substitu() {
      this.Substitution = true;
      this.Substitutionform.book_title_id = this.$route.query.id;
      if (
        this.multipleSelection == undefined ||
        this.multipleSelection.length == 0
      ) {
        this.Substitutionform.select_all = 1;
      } else if (this.multipleSelection.length > 0) {
        this.Substitutionform.select_all = 0;
        this.Substitutionform.book_catalog_ids = this.multipleSelection.map(
          (item) => item.id
        );
      }
    },
    /* 文字替换 */
    async SubstitutionBtn() {
      // 显示loading
      this.$loading();
      console.log(this.Substitutionform);
      let res = await batchReplaces(this.Substitutionform);
      console.log(res);
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "success",
        });
        this.Substitution = false;
        this.loadData2(this.iDS);
        this.$loading().close();
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
        this.$loading().close();
      }
    },
    //卷内列表检查数据按钮
    async InspectJuan() {
      const loading = this.$loading({
        lock: true,
        text: "正在检查，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.inspectJuan.book_title_id = this.ruleForm.id;
      let res = await Catalogscheck(this.inspectJuan);
      console.log(res, "1123");
      if (res.data.code == 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "检查完毕！没发现异常~",
          type: "success",
        });
        loading.close();
        let id = this.ruleForm.id;
        let project_classify_id = sessionStorage.getItem("clickTd");
        console.log(id);
        let res = await BtnBookTitles(id, { project_classify_id });
        console.log(res, "121");
        this.ruleForm = res.data.data;
        this.pages.book_title_id = this.ruleForm.id;
        this.loadData3();
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
        loading.close();
      }
    },
    /* 导入卷内目录 */
    showjuan() {
      this.tables = this.iDs;
      this.NUmber = "juannei";
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.demoDrawer.open2();
      });
    },
    /* 判断查看上一个还是下一个 */
    /*   async GoLeft(num) {
      if (num == 1) {
        this.Pdflist.type = "pre";
      } else if (num == 2) {
        this.Pdflist.type = "next";
      }
      let list = this.Pdflist;
      console.log(list);
      let res = await quickSwitchPdf(list);
      console.log(res, "1111");
      this.pageUrl = res.data.data.file_url;
      this.Pdflist.book_catalog_id = res.data.data.book_catalog_id;
    }, */
    /* 开关按钮 */
    async switchChange(state, row) {
      console.log(1);
      console.log(state, row);
      this.switchFrom.id = row.id;
      this.switchFrom.is_pic = state;
      console.log(this.switchFrom);
      let res = await bookCatalogsisPic(this.switchFrom);
      console.log(res);
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
      }
    },
    //问题标记
    ProblemMark() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,

          message: "请先选中要标记的问题",
          type: "error",
        });
      } else {
        this.dialogVisible = true;
      }
    },
    /* 提交问题 */
    async problemFromBtn() {
      let arr = this.multipleSelection.map((item) => item.id);
      // console.log(arr);
      let ids = arr.join(",");
      this.problemFrom.ids = ids;
      let res = await bookCatalogsproblem(this.problemFrom);
      console.log(res);
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "success",
        });
        this.dialogVisible = false;
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
      }
    },
    //多选删除
    deleteSelectItem() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,

          message: "请先选中要删除的数据哦！ 亲",
          type: "error",
        });
      } else {
        this.$confirm("请谨慎操作，删除后不可恢复！！！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          // 显示loading
          this.$loading();
          let arr = this.multipleSelection.map((item) => item.id);
          // console.log(arr);
          let ids = arr.join(",");
          let project_classify_id = sessionStorage.getItem("clickTd");
          // console.log(ids);
          let res = await delbookCatalogsMore({ ids, project_classify_id });
          // console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData2();
            this.$loading().close();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
            this.$loading().close();
          }
        });
      }
    },
    /* 查看pdf */
    /* async SeePdf(row) {
      console.log(row);
      let part_company_id = this.$route.query.companyId;
      let res = await bookContents({ part_company_id });
      console.log(res, "1111");
      this.datas = res.data.data;
      this.pageUrl = row.file_url;
      this.Pdflist.book_catalog_id = row.id;
      this.centerDialogVisible = true;
    }, */
    // 控制input显示 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      var that = this;
      switch (column.label) {
        case "文件编号":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "责任者":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "日期":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "文件材料题名":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "页号":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "备注":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        default:
          return;
      }
    },
    /* 点击表格 */
    Rowclick(row) {
      console.log(row);
      console.log(row.file_url);
      this.editForm = row;
    },
    // 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },

    // 把每一列的索引放进column
    tableCellClassName({ column, columnIndex }) {
      column.index = columnIndex;
    },

    /* 判断是否发生改变 */
    inputFocus() {
      this.ChangeNot = "1";
    },
    // 表格失去焦点初始化
    async inputBlur() {
      this.editForm.part_company_id = this.$route.query.companyId;
      this.editForm.project_classify_id = sessionStorage.getItem("clickTd");
      if (this.xsyc == 1 && this.ChangeNot == "1") {
        console.log(this.editForm, "121");
        let res = await modifybookCatalogs(this.editForm);
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "success",
          });
          this.pages.book_title_id = this.ruleForm.id;
          this.loadData3();
          this.ChangeNot = "0";
        } else {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "error",
          });
          this.pages.book_title_id = this.ruleForm.id;
          this.loadData3();
          this.ChangeNot = "0";
        }
      }
    },
    /* 多选输入框返回输入建议的方法 */
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    /* 输入建议框提供的建议 */
    loadAll() {
      return [
        { id: "1", value: "案卷题名重复" },
        { id: "2", value: "页号错误" },
        { id: "3", value: "日期错误" },
        { id: "4", value: "底图错误" },
        { id: "5", value: "档案号错误" },
        { id: "6", value: "页册错误" },
      ];
    },
    /* 输入建议框选中的值 */
    handleSelect(item) {
      console.log(item);
    },
  },
  created() {
    this.xsyc = this.$route.query.xsyc;
    this.loadData2();
    this.restaurants = this.loadAll();
  },
  /* mounted: function () {
    this.loadData2();
  }, */
};
</script>

<style scoped lang="less">
@import "../../../../../assets/css/tree.less";
.top {
  margin: 0px 0;
}

/deep/.el-table__header {
  margin-bottom: 20px;
  line-height: 40px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.table .el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
  margin: 0 5px;
}
/deep/.el-dialog__header {
  padding: 20px 20px 16px;
}
.top {
  display: flex;
  justify-content: space-between;
  /* .el-button {
    padding: 5px 5px;
  }*/
  .top-left {
    display: flex;
    flex-wrap: wrap;
    .el-button {
      padding: 3px 3px;
      height: 30px;
    }
  }
}
.top-right {
  flex: 1;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0;
    /deep/.el-form-item {
      margin-bottom: 1px;
    }
  }
  /deep/.el-input__inner {
    height: 30px;
    line-height: 30px;
    padding: 0 9px;
  }
  .el-input {
    width: 88%;
  }
  .el-select {
    width: 120px;
  }
  /deep/.el-form-item__content {
    margin-left: 70px !important;
  }
}
/* /deep/.el-table .el-table__cell {
  text-align: center;
} */
/deep/.el-table .el-table__cell {
  padding: 2px 0px;
}
/deep/.el-table .cell {
  padding-left: 5px;
  padding-right: 5px;
}
/deep/.el-textarea__inner {
  height: 55px;
}
.el-textarea {
  width: 280px;
  font-size: 12px;
}
.TextArea {
  .el-textarea {
    width: 170px;
    font-size: 12px;
  }
}
.TextAreas {
  /deep/.el-form-item__content {
    margin-left: 90px !important;
  }
}
.wid {
  .el-textarea {
    width: 520px;
    font-size: 12px;
  }
}
.table {
  /deep/.el-input__inner {
    padding: 0 5px;
  }
}
/deep/.el-radio-button__inner {
  padding: 7px 7px;
}
.IPBT {
  .el-input {
    width: 72%;
  }
}
.elFrom {
  width: 190px;
}
.elFroms {
  width: 270px;
}
.Btn {
  padding: 10px 15px;
  border-radius: 5%;
  border: 1px solid #ccc;
  cursor: pointer;
}
.InputTit {
  width: 620px;
}
.InputTits {
  width: 250px;
}
/deep/.el-input--mini .el-input__inner {
  height: 40px;
}
/deep/.el-input__suffix {
  right: 10px;
}
.login-btn {
  display: flex;
  justify-content: space-around;
}
.Sync {
  display: flex;
  .leftSync {
    width: 20%;
  }
  .rightSync {
    width: 80%;
    display: flex;
    i {
      font-size: 60px;
      margin: auto;
    }
  }
}
/* .custom-tree-node .nodeLabel {
  color: #666;
} */
/* .top-right .classBack {
  padding: 8px 40px;
  height: 35px;
} */
.tops {
  display: flex;
  justify-content: space-between;
  .classBack {
    padding: 2px 5px;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
  }
}
/* .custom-tree .el-tree-node__content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
} */
.span-ellipsis {
  width: calc(100% - 4px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: auto;
  padding: 4px 2px;
  border-radius: 4px;
}
.el-table td.el-table__cell div {
  width: 100%;
}

/deep/.el-textarea.is-disabled .el-textarea__inner {
  color: #5b5454;
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #5b5454;
}
/deep/.el-textarea__inner {
  padding: 2px 2px;
  font-size: 14px;
}
.inline-input {
  width: 85%;
}
.commontop .el-input {
  width: 20%;
  background-color: #fff;
}
.icons {
  color: red;
  font-size: 16px;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>